<template>
	<div class="blogComment">
	   <div class="comment-list">
           <p>评论</p>
           <div class="noComment" v-if = "show">
                 暂无评论
           </div>
           <div class="comment-list-1" v-for ="(item,index) in comment" :id = "item._id">
               <div class="comment-author">
                    <span class="author">{{item.author}}</span>
                    <span class="time">{{item.time}}</span>
           
               </div>
               <div class="comment-text">
                    {{item.commentText}}
                    <!-- <span class="answer" @click="answer(index)">回复</span> -->
                    <div class="answer-textarea" v-if="isAnswer" ref="index">
                        <textarea autofocus v-model = "answerText"></textarea>
                        <div class="answer-button" @click="answerReport(item._id)">发表</div>
                    </div>
               </div>
           </div>


           <div class="comment-list-1" v-for ="item in secondComment" :id = "item._id">
               <div class="comment-author">
                    <span class="author">{{item.author}}</span>
                    <span class="time">{{item.time}}</span>
               </div>
               <div class="comment-text">
                    {{item.commentText}}
                    <span class="answer" @click="answer(false)">回复</span>
                    <div class="answer-textarea" v-if="isAnswer">
                        <textarea autofocus v-model = "answerText"></textarea>
                        <div class="answer-button" @click="answerReport(item._id)">发表</div>
                    </div>
               </div>
           </div>
	   </div>
	   <el-pagination
		  background
		  layout="prev, pager, next"
		  :total="total">
		</el-pagination>
       <div class="comment">
          <p>发表评论</p>
          <div class="comment-content">
              <textarea placeholder="请输入评论" v-model= "textValue"></textarea>
          </div>
          <div class="submit-button">
             <span class="sure" @click = "sure()">确定</span>
          </div>
       </div>

	</div>
</template>
<style scoped>
	.blogComment{
		margin-top: 30px;
		padding: 0 20px
	}
	.comment-content{
		margin-top: 10px;
		
	}
	.comment{
		margin-top: 20px
	}
	.comment-text{
		font-size: 16px;
		padding: 4px 0
	}
	.comment-content textarea{
		border:none;
		width: 97%;
		height: 100px;
		border:1px solid #9a896e;
		resize: none;
		padding: 10px 1%
	}

	.comment>p{
		background: rgb(234,230,224);
		color: #9a896e;
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		padding:  10px;
		border-radius: 2px
	}
	.submit-button span{
		display: inline-block;
		width: 100px;
		line-height: 30px;
		margin-right: 5px;
		margin-top: 10px;
		border-radius: 4px;
		cursor: pointer;
		height: 30px;
		border-radius: 2px;
		text-align: center;
		color: white;
		border: 1px solid #E3A355;
        background-color: #F7AF57;
	}
	.answer-textarea{
		margin-top: 4px
	}
	.answer-textarea textarea{
		margin-left: 36px;
		resize: none;
		width: 200px;
		height: 50px;
		border-radius: 2px;
		border:1px solid #9a896e;
		padding:6px 10px

	}
	.submit-button{
		text-align: right;
	}
	.comment-list{
		margin-bottom: 20px
	}
    
    .comment-list>p{
    	background: rgb(234,230,224);
	    color: #9a896e;
	    font-size: 16px;
	    font-weight: bold;
	    text-align: left;
	    padding: 10px;
	    border-radius: 2px;
    }
    .comment-list{
    	text-align: left;

    }
    .author{
    	color: #2c6392;
    	font-weight: bold;
    	font-size: 16px;
    }
    .comment-list-1{
    	padding-left: 10px;
    	border-bottom: 1px solid #eee;
    	padding-bottom: 10px
    }
    .comment-author{
    	margin: 8px 0;
    }
    .time{
    	margin-left: 20px;
    	color: #929292
    }
    .answer{
    	display: inline-block;
    	margin-left: 10px;
    	color: #3690cf;
    	cursor:pointer;
    }
    .noComment{
    	text-align: center;
    	margin: 20px 0 20px 0
    }
    .answer-button{
       padding: 5px 10px;
       background: #F7AF57;
       color: white;
       width: 30px;
       margin-left: 208px;
       border-radius: 2px;
       margin-top: -4px;
       cursor:pointer;
    }
</style>
<script type="text/javascript">
	     export default {
		    name: 'App',
		    data () {
		        return {
		          textValue :'',
		          comment:[],
		          show:true,
		          placeholder: "",
		          isAnswer:false,
		          secondComment:[],
		          answerText:"",
		          total:1
		        }
		    },
		    created() {
                this.initComment();
              
		    },
		    methods:{
		    	sure () {
                    if(this.textValue == ""){
                    	this.$message({
					          message: '评论不能为空',
					          type: 'error'
				          });  
                    }else{
                         let self = this;
                    	 let param ={
                            commentText : self.textValue,
                            author:"1",
                            id: self.$route.params.watchNum
                    	 }

                    	 this.$http({
		                       method: "post", 
		                       url: this.url +'/articles/comment',
		                       data:param
			              })
			               .then(res => {
			                   if(res.data.code == 200){
			                        this.$message({
			                           message: '评论成功',
			                           type: 'success'
			                        });

			                        this.comment.push({
			                        	author: "1",
			                        	commentText :self.textValue ,
			                        	time : this.util.getTime()
			                        })

			                        this.show = false;
			                   }else{
			                        this.$message({
			                           message: '评论失败',
			                           type: 'error'
			                        });
			                   }

			              })
                    }
		    	},
		    	initComment(){
		    		this.$http({
		                       method: "get", 
		                       url: this.url +'/articles/initComment?id='+ this.$route.params.watchNum,
			              })
			               .then(res => {
			                   let result = res.data.result.result;   
			                   if(res.data.result.code == 200){
			                   	    if (result.length == 0) {
			                   	    	this.show = true
			                   	    }else{
			                            this.comment = result;
			                            this.total = res.data.result.totalPage
			                            this.show = false;
			                        }
			                   }else{
			                        this.$message({
			                           message: '获取评论失败',
			                           type: 'error'
			                        });
			                   }

			                })
		    	}
		    	//回復
		    	// answer(i){
		    	// 	console.log(this.$refs)
                        	 
		    	// },
		    	// answerReport(id){
		    	// 	let self = this;
		    	// 	let param ={
       //                  commentText : self.answerText,
       //                  author:"2",
       //                  id: id
       //          	 }

       //               this.$http({
		     //                   method: "post", 
		     //                   url: this.url +'/articles/answerComment',
		     //                   data:param
			    //           })
			    //            .then(res => {		
			    //                let result = res.data.result;             
			    //                if(res.data.code == 200){
			                   	  
			    //                	    	this.secondComment.push({
				   //                      	author: "2",
				   //                      	commentText :self.answerText ,
				   //                      	time : this.util.getTime()
				   //                      })
				   //                      this.isAnswer = false;
			                 
			    //                }else{
			    //                     this.$message({
			    //                        message: '获取评论失败',
			    //                        type: 'error'
			    //                     });
			    //                }

			    //      })
		    	// }
		    }
		 }
</script>